<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻类型</title>
    <!--vue-->
    <script src="/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入组件库 -->
    <script src="/js/index.js"></script>
    <!--axios-->
    <script src="/js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="5"><el-button type="primary" size="mini" @click="toEdit()" icon="el-icon-circle-plus">添加</el-button></el-col>
    </el-row>
    <el-row>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="newstid"
                    label="新闻类型ID"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="newstype"
                    label="新闻类型">
            </el-table-column>
            <el-table-column
                    prop="intro"
                    label="新闻类型简介">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="toEdit(scope.row.newstid)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>



    <el-row>
        <!--编辑模态框-->
        <el-dialog title="编辑" :visible.sync="editFormVisible">
            <el-form :model="form">
                <el-form-item v-if='show' label="新闻类型id" :label-width="formLabelWidth">
                    <el-input v-model="form.newstid" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新闻类型" :label-width="formLabelWidth">
                    <el-input v-model="form.newstype" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新闻类型简介" :label-width="formLabelWidth">
                    <el-input v-model="form.intro" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>
                <el-button v-if="form.newstid==null" type="primary" @click="add()">添加</el-button>
                <el-button v-else type="primary" @click="update()">更新</el-button>
            </div>
        </el-dialog>
    </el-row>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{//数据
            tableData:[],
            total:20,
            editFormVisible:false,//编辑模态框是否显示
            form:{},//编辑form
            formLabelWidth:"120px"
        },
        created:function () {
            this.loadData();
        },
        methods:{//方法
            //加载数据的方法
            loadData:function () {
                _this =this;
                //初始化数据
                axios.get('/news/newstypeList').then(function (response) {
                    // handle success  处理成功，回调的方法
                    //赋值新闻类型列表
                    _this.tableData = response.data.list;
                })
            },
            //打开编辑模态框
            toEdit:function (newstid) {
                //清空数据
                this.form={};
                //添加模式
                if (newstid==null||newstid==""){
                } else {//修改模式
                    //请求当前行newstid的数据
                    axios.post('/news/newstypeOne?newstid='+newstid).then(function (response) {
                        _this.form = response.data.map;
                    })
                }
                vue.editFormVisible=true;
            },
            //删除
            handleDelete:function (index,row) {
                this.$confirm('此删除会影响到相关的数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post('/news/deleteNewstype?newstid='+row.newstid).then(function (response) {
                        if(response.data.code == 200){
                            //提示成功
                            _this.$message({
                                type: 'success',
                                message: response.data.info
                            });
                            //重新加载数据
                            _this.loadData();
                        }
                    }).catch(function (error) {
                        _this.$message.error("删除失败");
                    });
            }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
            });
            },
            //添加
            add:function(){
                axios.post('/news/addNewstype',this.form).then(function (response) {
                    if(response.data.code == 200){
                        //提示成功
                        _this.$message({
                            message: '恭喜你，添加成功',
                            type: 'success'
                        });
                        //关闭弹出框
                        _this.editFormVisible=false;
                        //重新加载数据
                        _this.loadData();
                    }
                }).catch(function (error) {
                    _this.$message.error("添加失败");
                });
            },
            //更新
            update:function(){
                axios.post('/news/updateNewstype',this.form).then(function (response) {
                    if(response.data.code == 200){
                        //提示成功
                        _this.$message({
                            message: '恭喜你，更新成功',
                            type: 'success'
                        });
                        //关闭弹出框
                        _this.editFormVisible=false;
                        //重新加载数据
                        _this.loadData();
                    }
                }).catch(function (error) {
                    _this.$message.error("更新失败");
                });
            }
        }
    });
</script>
</body>
</html>